import styled, { css } from 'styled-components';
import { TStyledTextfieldProps, TStyledSpan, TStyledTextfieldContainer } from './Textfield.types';
import {
  DIMENSION,
  DEFAULT_DIMENSION,
  FONT_DIMENSION,
  DEFAULT_FONT_DIMENSION,
  INPUT_COLORS,
} from '../common/SelectTextfieldTextareaConstants';
import { hexToRgba } from '../common/functions';

/**
 * Стилизованный компонент ввода.
 * @param {IStyledInputProps} props - Параметры компонента.
 * @param {string} props.dimension - Размер компонента.
 * @param {string} props.status - Статус компонента.
 * @param {boolean} props.clear - Флаг, указывающий, должна ли быть отображена кнопка очистки.
 * @param {string} props.value - Значение в поле ввода.
 * @param {CSSObject} props.inputStyle - Пользовательские стили для компонента ввода в виде объекта CSS.
 * @param {CSSObject} props.focusedStyle - Пользовательские стили для компонента в фокусе в виде объекта CSS.
 * @param {CSSObject} props.filledStyle - Пользовательские стили для компонента с заполненным значением в виде объекта CSS.
 * @returns {React.Element} Стилизованный компонент ввода.
 */
export const StyledTextfield = styled.input<TStyledTextfieldProps>`
  display: flex;
  position: absolute;
  box-sizing: border-box;

  margin-left: ${props => props.marginLeft ?? "0"};

  &:focus {
    border-color: ${INPUT_COLORS.focus};
    outline: none;
    box-shadow: 0 0 3px 2px ${hexToRgba(INPUT_COLORS.focus, 0.5)};
    ${props => props.focusedStyle && props.focusedStyle}
  }
  
  border-radius: 0.3125rem;
  border-color: ${props => INPUT_COLORS[props.status]};
  border-style: solid;
  width: ${props => DIMENSION[props.dimension]?.width || DEFAULT_DIMENSION.width};
  height: ${props => DIMENSION[props.dimension]?.height || DEFAULT_DIMENSION.height};
  padding: 0;
  text-indent: 0.75rem;
  font-size: ${props => FONT_DIMENSION[props.dimension]?.fontSize || DEFAULT_FONT_DIMENSION.fontSize};
    
  ${props => props.inputStyle && props.inputStyle}

  ${props => props.clear &&
    css`
      &::-webkit-search-cancel-button {
        appearance: none;
        display: none;
      }
  `}

  ${props => props.value && props.filledStyle}

  ${props => props.type === 'search' && css`
    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
      height: 10px;
      width: 10px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M0 0 L10 10 M10 0 L0 10" stroke="rgba(108, 117, 125, 1)" stroke-width="2"/></svg>');
      background-repeat: no-repeat;
      cursor: pointer;
    }
  `}

  ${props => props.type === 'password' && css`
    &::-webkit-password-clear-button,
    &::-webkit-credentials-auto-fill-button {
      display: none !important;
    }

    ::-ms-reveal {
      display: none !important;
    }

    ::-moz-reveal {
      display: none !important;
    }
  `}

  padding-right: 0.5rem;

  ${props => props.inputWidth && css`
    width: ${props.inputWidth};
  `}
`;

/**
 * Стилизованный компонент подсказки.
 * @param {TStyledSpan} props - Свойства компонента.
 * @param {Status} props.status - Статус компонента ввода.
 * @returns {React.Element} - Стилизованный компонент подсказки.
 */
export const HintMessage = styled.span<TStyledSpan>`
  
  margin-left: 0.5rem;
  color: ${props => INPUT_COLORS[props.status] ? INPUT_COLORS[props.status] : '#343a40'};
  font-family: Helvetica Neue;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  visibility: ${props => (props.hint ? 'visible' : 'hidden')};
`;

export const StyledTextfieldContainer = styled.div<TStyledTextfieldContainer>`
    display: inline-flex;
    flex-direction: column;
    width: ${props => DIMENSION[props.dimension]?.width ?? DEFAULT_DIMENSION.width};
    height: ${props => DIMENSION[props.dimension]?.height ?? DEFAULT_DIMENSION.height};
`;
